<template>
  <div class="not-found-container">
    <Header />
    <el-main class="not-found-main">
      <div class="error-detail">
        <h2>很抱歉，您查看的页面找不到了！</h2>
        <p>请检查您输入的网址是否正确，或点击下面的按钮返回首页。</p>
        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
        <el-button @click="$router.go(-1)">返回上一页</el-button>
      </div>
    </el-main>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
</script>

<style scoped lang="scss">
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  .not-found-main {
    margin-top: 10rem;
    .error-detail {
      text-align: center;
      margin-bottom: 4rem;
      h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
      }
      p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
      }
      button {
        margin-right: 2rem;
      }
    }
  }
}
</style>
